<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            /* 默认块级元素为标准盒子 */
            box-sizing: content-box;
            width: 123px;
            height: 134px;
            /* 上右下左 */
            padding: 15px 17px 23px 36px;
            margin: 8px 19px 37px 14px;
            /* 内边距  上下左右内边距都为10px*/
            /* padding：10px; */
            /* 上下内边距为10px 左右为20px */
            /* padding: 10px 20px; */
            /* 上内边距为10px 左右为20px 下内边距为30px */
            /* padding: 10px 20px 30px; */
            /* 外边距 */
            /* margin: 10px; */
            /* 边框 
            border:width style color;
            */
            border: 5px solid red;
            /* 线性渐变背景色 */
            background-image: linear-gradient(to right bottom,red,cyan,pink);
        }
        style{
            .content{...

            }
            .border{
                /* 边框盒子 */
                box-sizing: border-box;
                width: 136px;
                height: 124px;
                margin: 5px 9px 17px 34px;
                padding: 15px 17px 19px 24px;
                border: 3px dotted cyan;
                /* 设置背景图片 */
                /* background-image: url(); */
                /* 设置背景图片大小 */
                /* background-size: 100% 100%; */
                /* 设置径向渐变背景颜色 */
                background-image: radial-gradient(red,pink,blue);
                /* border-style: ; */
            }
        }
    </style>
</head>
<body>
    <!-- 
    CSS盒模型：
    1.标准盒子 w3c盒子 内容盒子
    盒模型计算公式：
    盒子宽：186px = 123px + 5px + 5px + 17px + 36px
    内容区宽width+左右内边框+左右边框
    盒子高：182px = 134px + 5px + 5px + 15px + 23px
    内容区高heigt+上下内边框+上下边框
    盒子所占页面宽：盒子宽+左右外边距 186px + 19px + 14px = 219px
    盒子所占页面高：盒子高+上下外边框 182px + 8px + 37px = 227px
    2.边框盒子 怪异盒子 IE盒子
    盒子宽：136=内容区宽(可变)89px+左右边框6px+左右内边距41px
    盒子高：124=内容区高(可变)28px+上下边框6px+上下内边距34px 
    盒子所占页面宽：187px = 盒子宽+左右外边距 = 136px + 9px + 34px
    盒子所占页面高：146px = 盒子高+上下外边距 = 124px + 5px + 17px
    -->
    <div class="content">标准盒子</div>
    <div class="border">边框盒子</div>
</body>
</html>